<!-- 
    只会发送一次网络请求
    父组件将数据传给自组件

    props向子组件传递
    事件向父组件传递
 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="hello">
        <!-- 演示基本的父组件传值 -->
        <cpn :cmessage=message :cmovie=movie></cpn>

        <!-- 演示子组件props默认值 -->
        <cpn></cpn>
    </div>
    <template id="temp1">
        <div>
            <!-- 在这里使用传过来的属性数据 -->
            <h5>{{cmessage}}</h5>
            <ul>
                <li v-for="(item,index) in cmovie" :key="index">{{item}}</li>
            </ul>
        </div>
    </template>
    <script src="../../vue.js"></script>
    <script>
        const cpn = {
            template: '#temp1',
            // 父组件传给子组件数据，用props定义属性 用属性来接收父组件的数据
            // 写法1：数组语法
            // props: ['cmessage', 'cmovie'],

            // 写法2：对象语法  可以提供的功能更多
            props:{
                // 1.限制传进来的属性类型 不是对应的类型会警告
               /*  
                cmessage:[String,Number], //string 或者Number
                cmovie:Array, 
                */

                //2.提供一些默认值，以及是否必填
                cmessage:{
                    // 不是string会警告
                    type:String,
                    default:'morenzhi',
                    // 不填写会警告
                    required:true
                },

                // 类型如果是array或者object 默认值必须是一个函数
                cmovie:{
                    type:Array,
                    default(){
                        return ['a','b']
                    }
                }
         

            },
            data() {
                return {}
            },
            methods: {},
        }

        // vue实例可以看成根组件 其他元素的父组件
        const vue01 = new Vue({
            el: '#hello',
            data: {
                message: 'hello',
                movie: ['movie a', 'movie b'],
            },
            components: {
                cpn,
            }
        })
    </script>
</body>

</html>